import { Form, Input, Button } from "antd";
import { LoginDto } from "../../apis";
import { useUserStore } from "../../store/user";
import { useNavigate } from "react-router-dom";

export function Login() {
  const userStore = useUserStore();
  const navigate = useNavigate();

  const layout1 = {
    labelCol: { span: 5 },
    wrapperCol: { span: 20 },
  };

  const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 },
  };

  const onFnish = async (values: LoginDto) => {
    const [success] = await userStore.login(values);
    if (success) {
      // 跳转到首页
      navigate("/");
    }
  };

  return (
    <div className="flex justify-center items-center h-svh">
      <div className="w-[500px]  rounded-xl p-10 bg-white">
        <h2 className="text-2xl text-center mb-10 font-bold">聊天室</h2>
        <Form {...layout1} onFinish={onFnish} colon={false} autoComplete="off">
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item {...layout2}>
            <div className="flex justify-between w-full text-blue-500">
              <a href="/register">创建账号</a>
              <a href="/update_password">忘记密码</a>
            </div>
          </Form.Item>
          <Form.Item {...layout2}>
            <Button
              className="w-full h-[40px]"
              type="primary"
              htmlType="submit"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
